import { Button, Form, Input, Modal, Popconfirm, Radio, Space, Table, message } from "antd";
import type { ColumnsType } from "antd/es/table";
import { Img, ImgUpload } from "../components/common.tsx";
import { Icon } from "../components/icon.tsx";
import React, { useState } from "react";

interface DataType {
	key: string;
	name: string;
	age: number;
	avatar?: string;
	sex?: string;
	describes?: string;
	status?: 0 | 1;
}

//表单组件
const columns: ColumnsType<DataType> = [
	{
		title: "Avatar",
		dataIndex: "avatar",
		key: "avatar",
		render: (_, record) => {
			return (
				<Img
					url={record.avatar!}
					width={45}
					onClick={() => message.info(`点击了${record.name}头像`)}
				/>
			);
		},
	},
	{
		title: "Name",
		dataIndex: "name",
		key: "name",
		render: text => <a>{text}</a>,
	},
	{
		title: "Age",
		dataIndex: "age",
		key: "age",
	},
	{
		title: "Sex",
		dataIndex: "sex",
		key: "sex",
		render: (_, record) => {
			return (
				<Icon
					iconName={record.sex == "女" ? "icon-xingbienv" : "icon-xingbienan"}
					className="w30 h30"
				/>
			);
		},
	},
	{
		title: "Describes",
		dataIndex: "describes",
		key: "describes",
		render: (_, record) => {
			return (
				<div className="flex flex-items-center">
					<Icon iconName="icon-jieshao_" className="wh-20" />
					<p className="font-size-12 w100 text-truncate">{record.describes}</p>
				</div>
			);
		},
	},
	{
		title: "Status",
		key: "status",
		render: (_, record: any) => {
			return record.status == 1 ? <a>正常</a> : <a className="color-red">禁止</a>;
		},
	},
	{
		title: "Action",
		key: "action",
		render: (_, record) => <Action record={record} />,
	},
];

//模拟的数据
const data: DataType[] = [
	{
		key: "1",
		name: "宵宫",
		age: 32,
		sex: "女",
		describes: "我叫宵宫222333333333333333333",
		avatar: "/avatar.jpg",
		status: 1,
	},
	{
		key: "2",
		name: "诗寇蒂",
		age: 42,
		sex: "女",
		describes: "我叫诗寇蒂",
		avatar:
			"https://cyfqyb.oss-cn-guangzhou.aliyuncs.com/markdown/%E8%AF%97%E5%AF%87%E8%92%823.png",
		status: 0,
	},
	{
		key: "3",
		name: "雷姆",
		age: 32,
		sex: "女",
		describes: "我叫雷姆",
		avatar: "https://cyfqyb.oss-cn-guangzhou.aliyuncs.com/markdown/%E9%9B%B7%E5%A7%868.jpg",
		status: 1,
	},
	{
		key: "4",
		name: "绫华",
		age: 16,
		sex: "女",
		describes: "我叫绫华",
		avatar: "https://cyfqyb.oss-cn-guangzhou.aliyuncs.com/markdown/%E7%BB%AB%E5%8D%8E.jpg",
		status: 1,
	},
];

export function User() {
	return (
		<div className="wh-full p-15 box-border">
			<Input.Search
				placeholder="输入关键字进行搜索"
				enterButton="搜索"
				onSearch={value => {
					if (value !== "") message.success(`${value}搜索成功！`);
				}}
				allowClear
				className="mb10"
			/>
			<Table columns={columns} dataSource={data} />
		</div>
	);
}

interface CollectionCreateFormProps {
	open: boolean;
	onCreate: (values: any) => void;
	onCancel: () => void;
	record: any;
}
const ChangeItem: React.FC<CollectionCreateFormProps> = ({ open, onCreate, onCancel, record }) => {
	const [form] = Form.useForm();
	//const [url, setUrl] = useState(record.avatar);
	return (
		<Modal
			open={open}
			title="修改用户个人信息"
			onCancel={onCancel}
			onOk={() => {
				form
					.validateFields()
					.then(values => {
						form.resetFields();
						onCreate(values);
						message.success(`${values.name}的信息修改成功`);
					})
					.catch(info => {
						console.log("Validate Failed:", info);
					});
			}}
		>
			<ImgUpload
				url={record.avatar}
				width={60}
				style={{ margin: "0 auto" }}
				setValue={(value: string) => {
					form.setFieldValue("avatar", value);
				}}
			/>
			<Form form={form} layout="vertical" name="form_in_modal" initialValues={record}>
				<Form.Item
					name="name"
					label="Name"
					rules={[
						{
							required: true,
							message: "Please input the Name of collection!",
						},
					]}
				>
					<Input />
				</Form.Item>
				<Form.Item name="age" label="Age">
					<Input type="textarea" />
				</Form.Item>
				<Form.Item name="sex" label="Sex">
					<Input />
				</Form.Item>
				<Form.Item name="status" label="Status">
					<Radio.Group name="radiogroup" defaultValue="status">
						<Radio value={1}>正常</Radio>
						<Radio value={0}>禁止</Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item name="describes" label="Describes">
					<Input />
				</Form.Item>
			</Form>
		</Modal>
	);
};

const Action: React.FC<{ record: any }> = ({ record }) => {
	const [open, setOpen] = useState(false);
	return (
		<Space size="middle">
			<Button
				type="primary"
				onClick={() => {
					console.log(record);

					setOpen(true);
				}}
			>
				Change
			</Button>
			<ChangeItem
				open={open}
				onCreate={(values: any) => {
					// TODO: 提交数据
					//在这调用函数修改用户数据
					console.log(values);
					setOpen(false);
				}}
				onCancel={() => {
					setOpen(false);
				}}
				record={record}
			/>
			<Popconfirm
				title="Delete the task"
				description="Are you sure to delete this task?"
				onConfirm={() => {
					// TODO: 删除数据
					message.success(`${record.name} Delete completed`);
				}}
				onCancel={() => {
					message.success("Cancel success");
				}}
				okText="Yes"
				cancelText="No"
			>
				<Button danger>Delete</Button>
			</Popconfirm>
		</Space>
	);
};
